<template>
  <view>
    <view class="search-cont">
      <view class="search">
        <input
          type="text"
          placeholder-class="inputclass"
          confirm-type="search"
          focus="true"
          placeholder="请输入关键字"
          v-model="searchdata"
          @confirm="onKeyInput"
          @focus="searchFocus()"
        />
      </view>
      <view class="search-code" @click="seArch()"> 搜索 </view>
    </view>
    <!-- 搜索历史 -->
    <view class="search-history" v-if="ifhistory">
      <view class="search-title">
        <view>搜索历史</view>
        <view @click="removeStorage()">
          <image src="../../static/coen/del.svg" mode="widthFix"></image>
        </view>
      </view>
      <view class="menu-block">
        <block v-for="(item, index) in setdata" :key="index">
          <view :class="{ activetext: index == num }" @click="menubtn(item)">{{ item }}</view>
        </block>
      </view>
    </view>
    <!-- 内容展示 -->
    <view v-if="shopcont" class="content-left">
      <block v-for="(item, index) in takeshop" :key="index">
        <view class="content-view" @click="takeOut(index)">
          <view class="content-img">
            <image :src="item.logo" mode="scaleToFill"></image>
          </view>
          <view class="content-title">
            <text class="content-take">{{ item.shop }}</text>
            <view class="content-monthly">
              <text>月售200</text>
              <text>约{{ item.duration }}分钟</text>
            </view>
            <view class="content-starting">
              <text>起送￥{{ item.delivering }}</text>
              <text>配送￥{{ item.physical }}</text>
              <text>人均￥{{ item.capita }}</text>
            </view>
            <view class="content-starting">
              <image src="../../static/Focus.png" mode="widthFix"></image>
              <text>{{ item.types }}</text>
            </view>
          </view>
        </view>
      </block>
    </view>
    <Tips ref="tips"></Tips>
  </view>
</template>

<script>
import Tips from "../../element/tips.vue";
import { searchurl } from "../../api/request.js";
import { publicing } from "../../api/api.js";
export default {
  components: {
    Tips,
  },
  data() {
    return {
      // 搜索关键词
      searchdata: "",
      // 搜索结果
      takeshop: [],
      // 搜索历史
      setdata: [],
      shopcont: false, //商品列表
      ifhistory: true, //搜索历史
    };
  },
  methods: {
    takeOut() {
      wx.navigateTo({
        url: "../takeout/takeout",
      });
    },
    // 搜索
    seArch() {
      // console.log(this.searchdata)
      if (this.searchData != "") {
        this.ifhistory = false;
        let searchKey = this.searchdata;
        this.searchData(searchKey);
        this.getStorage(searchKey);
      }
    },
    onKeyInput(e) {
      let searchKey = e.detail.value;
      if (searchKey != "") {
        this.ifhistory = false;
        this.searchData(searchKey);
        this.getStorage(searchKey);
      }

      // console.log(e.detail.value)
    },

    //本地存入搜索历史
    getStorage(searchKey) {
      let searcharray = uni.getStorageSync("search_Key") || [];
      searcharray.unshift(searchKey);
      uni.setStorageSync("search_Key", searcharray);
    },

    //取出本地缓存
    setStorage() {
      let setdata = uni.getStorageSync("search_Key");
      let setdataarr = Array.from(new Set(setdata));
      if (setdataarr == "") {
        this.ifhistory = false;
      } else {
        this.setdata = setdataarr;
        this.ifhistory = true;
      }
    },

    //手动清楚搜素历史
    removeStorage() {
      uni.removeStorageSync("search_Key");
      this.setStorage();
    },
    searchData(searchKey) {
      let data = {
        searchdata: searchKey,
      };
      publicing(searchurl, data)
        .then((res) => {
          console.log(res);
          if (res.data == "没有商品数据") {
            this.shopcont = false;
            let bull = true;
            let tips = "没有你要找的商品";
            this.tipsing(bull, tips);
          } else {
            this.shopcont = true;
            let bull = false;
            let tips = "";
            this.tipsing(bull, tips);
            this.takeshop = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    tipsing(bull, tips) {
      this.$nextTick(() => {
        this.$refs.tips.init(bull, tips);
      });
    },
    // 搜索历史的搜索
    menubtn(item) {
      this.ifhistory = false;
      console.log(item);
      this.searchData(item);
    },
    searchFocus() {},
  },
  mounted() {
    this.setStorage();
  },
};
</script>

<style scoped>
@import "../../common/meituan.css";
.content-left {
  margin: 0 20upx;
}
.search {
  height: 70upx;
  line-height: 70upx;
  width: 100%;
  display: flex;
  flex-direction: row;
  background: #f8f8f8f8;
  border-radius: 20upx;
  margin-left: 20upx;
}
.search input {
  height: 70upx;
  line-height: 70upx;
  width: 100%;
  font-size: 30upx;
  color: #666666;
  padding-left: 30upx;
}
.search-cont {
  display: flex;
  justify-content: space-between;
  height: 70upx;
  align-items: center;
  padding: 30upx 0;
}
.search-code {
  width: 150upx;
  height: 50upx;
  text-align: center;
  font-size: 30upx;
}
/* 搜索历史 */
.search-history {
  margin: 20upx;
}
.search-title {
  font-size: 30upx;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60upx;
  line-height: 60upx;
}
.search-title image {
  width: 36upx;
  height: 36upx;
  display: block;
}
.menu-block view {
  background: #f7f8fa;
  border-radius: 6upx;
  font-size: 27upx;
  color: #392c33;
  text-align: center;
  padding: 10upx;
  margin: 20upx 20upx 0 0;
}
.menu-block {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}
</style>
